<template>
	<view id="app">
		<view style="padding-bottom: 115rpx;">
			<view style="display: flex;padding: 30px 0 10px 10px;background-color: #FF7900;">
				<view>
					<span style="color: white;font-weight: bold;font-size: 20px;text-overflow:ellipsis;white-space: nowrap;overflow:hidden;">{{qu!="区" ? qu : (shi!="市" ? shi : (sheng!="省" ? sheng : "定位中"))}}</span>
				</view>
				<view style="margin-left: 10px;">
					<u-search placeholder="搜索自提点" :show-action="false" style="width: 90px;" @change="sousuo"></u-search>
				</view>
			</view>
			<view style="display: flex;" @click="value = true">
				<view class="mui-table-cell">
					<view style="font-size: 30rpx;">{{sheng}}<uni-icons type="arrowdown" style="margin-left: 20px;" /></view>
				</view>
				<view class="mui-table-cell">
					<view style="font-size: 30rpx;">{{shi}}<uni-icons type="arrowdown" style="margin-left: 20px;" /></view>
				</view>
				<view class="mui-table-cell">
					<view style="font-size: 30rpx;">{{qu}}<uni-icons type="arrowdown" style="margin-left: 20px;" /></view>
				</view>
			</view>
			<!-- 城市弹出层 -->
			<view class="u-demo-area">
				<city-select v-model="value" @city-change="cityChange"></city-select>
			</view>
			<view style="padding-left: 50rpx;background-color: white;">
				<view class="item" v-for="(item ,i) in zitidianList" :key="item.id" @click="xuanzhong(item.id,item.zitiName,item.place+item.placeDetail,item.phone)" style="display: flex;padding-top: 20rpx;padding-bottom: 20rpx;">
					<view class="imgbox">
						<image :src="switchImg(item.logo)" mode="heightFix" style="max-width: 110rpx;height: 110rpx;"></image>
					</view>
					<view class="goods-info" style="padding-left: 20rpx;">
						<view class="mName" style="font-size: 17px;">{{item.zitiName}}</view>
						<view class="address" style="color: #82848A;">{{item.place}}</view>
						<view style="display: flex;font-size: 15px;color: #82848A;">
							<view class="place" style="color: #82848A;">详细地址：{{item.placeDetail}}</view>
							<view style="padding-left: 100rpx;">{{item.juli}}公里</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import citySelect from './ucitySelect.vue';
	import amap from '../../../utils/amap-wx.130.js';		// 高德小程序插件  
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				value: false,
				current: 1,
				value1: 1,
				value2: 1,
				value3: 1,
				sheng: "省",
				shi: "市",
				qu: "区",
				options1: [],		//省份集合
				options2: [],		//城市集合
				options3: [],		//区县集合
				zitidianList: [],	//自提点集合
				key: '2f7f27be426ba68483764cd2e9f2c968' ,
				
				gid:'',				//商品ID
				yunfei:'',			//运费
				catids:'',			//购物车ID集合
				gname:'',			//商品名称
				gprice:'',			//商品价格
				gimages:'',			//商品图片
				gdanwei:'',			//商品单位
				names:'',			//规格
				params:'',			//规格下标
				num:'',				//数量
				liuyan:'',			//买家留言
				getBack:'',			//返回的页面（1：立即购买页面  2：购物车结算页面）
				
				cartid:'',			//购物车ID集合
				orId:'',			//订单ID（订单页面更换自提点）
			}
		},
		onLoad(opt) {
			this.gid = opt.gid;
			this.yunfei = opt.yunfei;
			this.catids = opt.catids;
			this.gname = opt.gname;
			this.gprice = opt.gprice;
			this.gimages = opt.gimages;
			this.gdanwei = opt.gdanwei;
			this.names = opt.names;
			this.params = opt.params;
			this.num = opt.num;
			this.liuyan = opt.liuyan;
			this.getBack = opt.getBack;
			this.orId = opt.orId;
			this.cartid = opt.cartid;
			//查询省份
			// this.$http.get('/center/place/provices', {}).then(res => {
			// 	if(res.data.code == 200) {
			// 		for(var i in res.data.data) {
			// 			this.options1.push({label:res.data.data[i].prName , value:res.data.data[i].prId})
			// 		}
			// 	}
			// });
			//使用高度插件定位
			this.amapPlugin = new amap.AMapWX({  	// 初始化高德插件
				key: this.key  
			}); 
			this.amapPlugin.getRegeo({  
				success: (data) => {
					console.log(data[0].regeocodeData.addressComponent)
					this.addressName = data[0].name.substr(0,3); 
					this.sheng = data[0].regeocodeData.addressComponent.province;
					let shiqu = data[0].regeocodeData.addressComponent.city;
					if(shiqu==null || shiqu=="" || shiqu==undefined){
						
					}else{
						this.shi = shiqu;
					}
					this.qu = data[0].regeocodeData.addressComponent.district;
					//查询定位地址的携联自提点
					this.$http.get('/xielainZitidian/searchZitidian', {
						p: this.sheng=='省' ? '' : this.sheng,
						c: this.shi=='市' ? '' : this.shi,
						a: this.qu=='区' ? '' : this.qu,
						gid:this.gid
					}).then(res => {
						console.log(res.data)
						if(res.data.code==200){
							if(res.data.data.length > 0){
								this.zitidianList=res.data.data;
							}
						}
					});
				}  
			});   
		},
		methods: {
			cityChange(e) {
				console.log("省份："+e.province.label+" 城市："+e.city.label+" 区县："+e.area.label)
				if(e.province.label != undefined){
					this.sheng=e.province.label;
				}else{
					this.sheng="省";
				}
				if(e.city.label != undefined){
					this.shi=e.city.label;
				}else{
					this.shi="市";
				}
				if(e.area.label != undefined){
					this.qu=e.area.label;
				}else{
					this.qu="区";
				}
				//查询省份下面的联盟商家
				this.$http.get('/xielainZitidian/searchZitidian', {
					p: this.sheng=='省' ? '' : this.sheng,
					c: this.shi=='市' ? '' : this.shi,
					a: this.qu=='区' ? '' : this.qu,
					jingdu:this.jingdu,
					weidu:this.weidu,
					gid:this.gid
				}).then(res => {
					console.log("222")
					console.log(res.data)
					if(res.data.code==200){
						this.zitidianList=res.data.data;
					}
				});
			},
			//选中一个自提点
			xuanzhong(zitiId,zitiName,zitiAddress,zitiPhone){
				console.log("选中自提点ID："+zitiId+" 自提点名称："+zitiName+" 自提点地址："+zitiAddress+" 自提点电话："+zitiPhone);
				console.log("返回页面："+this.getBack);
				console.log("返回数量："+this.num)
				if(this.getBack==1){//立即购买页面选择自提点
					uni.navigateTo({
						url:'../LjgmOrder/LjgmOrder?zitiId='+zitiId+"&zitiName="+zitiName+"&zitiAddress="+zitiAddress+"&zitiPhone="+zitiPhone+"&gid="+this.gid+'&yunfei='+this.yunfei+'&gname='+this.gname+'&gprice='+this.gprice+'&gimages='+this.gimages+'&gdanwei='+this.gdanwei+'&names='+this.names+'&params='+this.params+'&num='+this.num+'&liuyan='+this.liuyan+'&getBack=1'+'&type=ziti'
					})
				}else if(this.getBack==2){//购物车结算页面选择自提点
					uni.navigateTo({
						url:'../ConfirmOrder?zitiId='+zitiId+"&zitiName="+zitiName+"&zitiAddress="+zitiAddress+"&zitiPhone="+zitiPhone+"&id="+this.cartid+'&liuyan='+this.liuyan+'&getBack=2'+'&type=ziti'
					})
				}else if(this.getBack==3){//订单页面更换自提点
					this.$http.get('/xielainZitidian/searchZitidian',{
						orId:this.orId,
						zitidianID:zitiId
					}).then(res => {
						if(res.data.code==200){
							this.$u.toast("修改自提点成功");
							setTimeout(() => {
								uni.navigateTo({
									url:'orders?index=0'
								})
							},500)
						}
					})
				}
			},
			//搜索自提点
			sousuo(res){
				console.log("来搜索了："+res)
				//根据联盟商家名称搜索联盟商家
				this.$http.get('/xielainZitidian/searchZitidian', {
					p:this.sheng=='省' ? '' : this.sheng,
					c:this.shi=='市' ? '' : this.shi,
					a: this.qu=='区' ? '' : this.qu,
					jingdu:this.jingdu,
					weidu:this.weidu,
					gid:this.gid,
					key: res,
				}).then(res => {
					console.log("333")
					console.log(res.data)
					if(res.data.code==200){
						this.zitidianList=res.data.data;
					}
				});
			},
			// open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				// this.$refs.uDropdown.highlight();
			// },
			// close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				// this.$refs.uDropdown.highlight(index);
			// },
			switchImg(images){
				// console.log("项目地址："+this.host+" 联盟商家图片："+images);
				if(images!=null && images!="" && images!=undefined){
					return this.host+'/images/zitidianLogo/'+images;
				}
				return '../../../static/center/tuijian.png';
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mui-content a {
		color: #8F8F94;
	}
	.mui-content a.active {
		color: #007aff;
	}
	.u-dropdown__menu__item{
		border-right:1rpx #c8c8c8 solid;
	}
	.uni-scroll-view-content{
		height: 527px;
	}
	.mui-table-cell{
		width: 33.3%;
		height: 40px;
		border: 1rpx solid #dcdcdc;
		line-height: 40px;
		padding-left: 3%;
		overflow:hidden;
	    text-overflow:ellipsis;
	    white-space:nowrap;
	}
</style>
